<template>
    <div id="main">
        <el-row>
            <el-col :span="17">
                <el-main>
                    <div class="six-action">

                        <el-col class="six-action-to" :span="8" v-for="(v, i) in act" :key="i" style="margin-bottom: 10px;">
                            <el-col :span="1">
                                <div style="padding: 10px;"></div>
                            </el-col>

                            <el-col :span="22">
                                <el-card style="height: 18vh;cursor: pointer;" shadow="always" @click.native="toMethod(v)">
                                    <div class="act-img">
                                        <el-image :src="v.src"></el-image>
                                    </div>
                                    <div class="act-text">
                                        {{ v.text }}
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="1"></el-col>

                        </el-col>
                    </div>

                    <div class="six-action">
                        <div style="height: 100%;margin: 0px 15px 0 15px;">
                            <el-row>
                                <el-col :span="11">
                                    <el-card>
                                        <div slot="header">
                                            <span>各学年综合素质成绩</span>
                                        </div>
                                        <div style="position: relative;top: -20px;" class="echart" id="mychart1"
                                            :style="myChartStyle"></div>

                                    </el-card>
                                </el-col>
                                <el-col :span="2">
                                    <div style="margin: 1px;">

                                    </div>
                                </el-col>


                                <el-col :span="11">
                                    <el-card>
                                        <div slot="header">
                                            <span>综合素质成绩倾向情况</span>
                                        </div>
                                        <div style="position: relative;top: -20px;" class="echart" id="mychart2"
                                            :style="myChartStyle"></div>

                                    </el-card>
                                </el-col>

                            </el-row>

                        </div>
                    </div>
                </el-main>
            </el-col>

            <el-col :span="6">
                <el-main style="padding: 0;">

                    <el-card style="margin-top: 20px;height:30vh;" shadow="always">
                        <div slot="header">
                            <span>快捷功能</span>
                        </div>
                        <div style="height: 22vh;position: relative;">
                            <el-col :span="6" style="text-align: center;" v-for="(v, i) in fast" :key="i">
                                <div style="width: 100%;height:11vh;" class="fast-act">
                                    <el-image :src="v.src"
                                        style="position: relative;width: 44.917px;height: 44px;"></el-image>
                                    <div style="font-size: 14px;position: relative;top: -5px;">{{ v.text }}</div>
                                </div>
                            </el-col>
                        </div>
                    </el-card>

                    <el-card style="margin-top: 20px;height: 14vh;" shadow="always">
                        <div slot="header">
                            <span>提醒消息</span>
                        </div>
                        <el-row v-if="have_msg">
                            <el-carousel :interval="4000" class="lunbo" height="35" direction="vertical">
                                <el-carousel-item style="cursor: pointer;" @click.native="msgVClick(v.content)"
                                    v-for="(v, i) in msg_list" :key="i">
                                    <span style="overflow: hidden;">{{ v.content.length > 20 ? v.content.substr(0, 17) +
                                        "..." :
                                        v.content }}</span>
                                </el-carousel-item>
                            </el-carousel>

                        </el-row>
                        <div v-else>
                            暂无消息
                        </div>
                    </el-card>

                    <el-card style="margin-top: 20px;height: 30vh;" shadow="always">
                        <div slot="header">
                            <span>公示栏</span>
                        </div>
                        <el-row v-if="have_comp">
                            <div style="height: 25vh; overflow-y: scroll;overflow-x: hidden;">
                                <div v-for="(v, i) in comp_list" :key="i" style="cursor: pointer;margin-bottom: 5px;">
                                    {{ v.submitterName }}--{{ v.projectName }} -- 审核通过
                                </div>
                            </div>


                        </el-row>
                        <div v-else>
                            暂无消息
                        </div>
                    </el-card>

                </el-main>
            </el-col>
        </el-row>


        <!-- 思想品德提交申请 -->
        <el-dialog title="思想品德加分" :visible.sync="iamV" width="600px" append-to-body>
            <el-form ref="iamForm" :model="iamForm" label-width="100px">

                <el-form-item label="学年" prop="stuYearId">
                    <el-select style="width: 400px;" v-model="iamForm.stuYearId" placeholder="请选择学年">
                        <el-option v-for="(v, i) in stu_year_list" :value="v.id" :label="v.stuYearName"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="加分项" prop="childType">
                    <el-select style="width: 400px;" v-model="iamChildType" placeholder="请选择加分项">
                        <el-option v-for="(v, i) in child_list" :key="i" :value="v.ruleId" :label="v.ruleName"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="分值" prop="description">
                    <el-input style="width: 400px;" v-model="iam_add_record" type="number" disabled placeholder="请输入内容" />
                </el-form-item>

                <el-form-item label="佐证材料" prop="material">
                    <image-upload v-model="iamForm.material" />
                </el-form-item>

                <el-form-item label="备注" prop="description">
                    <el-input v-model="iamForm.description" type="textarea" placeholder="请输入内容" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitIamForm">确 定</el-button>
                <el-button @click="cancelIam" fit="contain">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="消息" :visible.sync="msgV" width="30%">
            <span>{{ msg_content }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="msgV = false">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>
<script>
import * as echarts from "echarts";

import store from "@/store";
import { listYear } from "@/api/stuCQS/basedata/year";
import { istIamChild } from "@/api/stuCQS/basedata/cphRules";
import { stuAdd } from "@/api/stuCQS/info-fill/iam";
import { listMsg } from "@/api/stuCQS/process-center/msg";
import { getCompleted } from "@/api/stuCQS/process-center/auditDetails";

export default {
    name: "index-default",
    data() {
        return {

            xData: ["2021春季学年", "2021秋季学年", "2022春季学年", "2022秋季学年", "2023春季学年", "2023秋季学年"], //横坐标
            yData: [90, 88, 95, 96, 85, 89], //数据
            myChartStyle: { float: "left", width: "400px", height: "300px", margin: 0 },//图表样式



            //判断是否是学生
            isStu: false,
            //思想品德表单
            iamForm: {},
            //学年列表
            stu_year_list: [],
            //选择的加分项
            iamChildType: null,
            //加分项列表
            child_list: [],
            //加分分值
            iam_add_record: 0,
            //思想品德视图
            iamV: false,

            act: [


                {
                    src: require("@/assets/icons/index-icon/Icon-Add.png"),
                    url: "",
                    text: "加分审核"
                },
                {
                    src: require("@/assets/icons/index-icon/Icon-Study.png"),
                    url: "",
                    text: "课程学习"

                }, {
                    src: require("@/assets/icons/index-icon/Icon-Second class.png"),
                    url: "",
                    text: "第二课堂"
                }, {
                    src: require("@/assets/icons/index-icon/Icon-Activity.png"),
                    url: "",
                    text: "体能测试"
                }, {
                    src: require("@/assets/icons/index-icon/Icon-appraise.png"),
                    url: "",
                    text: "综合评价"
                }, {
                    src: require("@/assets/icons/index-icon/Icon-Sipin.png"),
                    url: "",
                    text: "思想品德",
                    type: 1
                },
            ],

            fast: [{
                src: require("@/assets/icons/index-icon/Icon-Folder.png"),
                url: "",
                text: "操作手册"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Arrow.png"),
                url: "",
                text: "我的申请"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Info.png"),
                url: "",
                text: "我的待办"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Clock.png"),
                url: "",
                text: "综合素质"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Send.png"),
                url: "",
                text: "我的流程"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Chart.png"),
                url: "",
                text: "优秀班级"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Home.png"),
                url: "",
                text: "优秀宿舍"
            },
            {
                src: require("@/assets/icons/index-icon/Icon-Menu.png"),
                url: "",
                text: "已办任务"
            },
            ],

            msg_list: [],
            have_msg: false,
            msg_content: "",
            msgV: false,

            comp_list: [],
            have_comp: false,
            comp_msg: "",
            compV: false

        }
    },
    created() {
        this.listMyMsg();
        this.getCompleted();
        this.isStu = false;
        let temp = store.getters.roles;
        temp.map(x => {
            if (x == "teststu") {
                this.getStuYear();
                this.listIamChild();
                this.isStu = true;
            }
        });

    },
    mounted() {
        this.initEcharts();
        this.initEcharts2();
    },
    watch: {
        "iamChildType"(newVal, oldVal) {
            this.child_list.map((v) => {
                if (v.ruleId == newVal) {
                    this.iam_add_record = v.maxScore
                }
            });
        },
    },
    methods: {
        initEcharts() {
            // 基本柱状图
            const option = {
                xAxis: {
                    data: this.xData,
                    axisLabel: {
                        fontSize: 6 //设置坐标轴文本标签的字体大小
                    },
                    axisLine: {
                        lineStyle: {
                            fontSize: 6 //设置坐标轴轴线的字体大小
                        }
                    }
                },
                yAxis: {},
                series: [
                    {
                        type: "bar", //形状为柱状图
                        data: this.yData,
                        barWidth: '20%',
                    }
                ]
            };
            const myChart = echarts.init(document.getElementById("mychart1"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        initEcharts2() {
            let option = {
                title: {
                    text: ''
                },
                legend: {
                    data: ['Allocated Budget', 'Actual Spending']
                },
                radar: {
                    // shape: 'circle',
                    indicator: [
                        { name: 'Sales', max: 6500 },
                        { name: 'Administration', max: 16000 },
                        { name: 'Information Technology', max: 30000 },
                        { name: 'Customer Support', max: 38000 },
                        { name: 'Development', max: 52000 },
                        { name: 'Marketing', max: 25000 }
                    ]
                },
                series: [
                    {
                        name: 'Budget vs spending',
                        type: 'radar',
                        data: [
                            {
                                value: [4200, 3000, 20000, 35000, 50000, 18000],
                                name: 'Allocated Budget'
                            },
                            {
                                value: [5000, 14000, 28000, 26000, 42000, 21000],
                                name: 'Actual Spending'
                            }
                        ]
                    }
                ]
            };

            const myChart = echarts.init(document.getElementById("mychart2"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });


        },




        async getCompleted() {
            let res = await getCompleted();
            if (res.rows.length > 0) {
                this.have_comp = true;
                this.comp_list = [...res.rows];
                console.log(this.comp_list)
            }
        },

        msgVClick(v) {

            this.msg_content = v;
            this.msgV = true;
        },

        //列出我的消息
        async listMyMsg() {
            let res = await listMsg();
            if (res.rows.length > 0) {
                this.have_msg = true;
                this.msg_list = [...res.rows];
            }
        },


        /** 提交思想品德 */
        submitIamForm() {
            this.$refs["iamForm"].validate(valid => {
                if (valid) {
                    let sdata = {
                        stuYearId: this.iamForm.stuYearId,
                        material: this.iamForm.material,
                        description: this.iamForm.description,
                        ruleId: this.iamChildType,
                    }
                    stuAdd(sdata).then(response => {
                        this.$modal.msgSuccess("新增成功");
                        this.iamV = false;
                    });
                }

            });
        },
        cancelIam() {
            this.iamV = false;
            this.reset();
        },
        reset() {
            this.resetForm("iamForm");
        },
        //列出思想品德子类
        async listIamChild() {
            let res = await listIamChild();
            this.child_list = [...res.data];
        },
        //列出学年信息
        async getStuYear() {
            let res = await listYear();
            this.stu_year_list = [...res.rows];
        },

        goTarget(href) {
            window.open(href, "_blank");
        },
        getBackColor(i) {
            let color = this.colors[i % 7];
            return {
                "background-color": color
            };

        },
        toMethod(v) {
            this.reset();
            if (this.isStu) {
                let type = v.type;
                if (type == 1) {
                    this.iamV = true;
                }
            } else {
                this.$router.push(v.url)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.six-action-to:hover,
.fast-act:hover {
    cursor: pointer;
    transform: scale(1.1);
}


div::-webkit-scrollbar {
    width: 4px;
}

div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 0.2;
    background: fade(blue, 60%);
}

div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: fade(blue, 30%);
}


.lunbo {
    padding: 0 8px 0 0;
    box-sizing: border-box;
    text-overflow: ellipsis; //超出内容...展示
    word-break: keep-all; //是否折断文本，keep-all表示不折断
    white-space: nowrap; //不换行展示文本
    overflow: hidden; //超出部分隐藏，与text-overflow配合使用
    flex: 1; //这个是跟左侧的图片组成的一个flex布局
}

.arrow {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent rgb(108, 108, 108);
    position: relative;
    top: 50px;
}


#main {
    background-color: rgb(250, 254, 255);
    padding: 10px 0 10px 20px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;


}

.el-card__header {
    border: none;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}


.el-main {
    color: #333;
    margin: 0;

    .box-card {
        margin: 0 auto;
    }

    .six-action {
        height: 40vh;
    }

    .act-img {
        width: 4.75rem;
        height: 4.625rem;
        position: relative;
        top: 10px;
        display: inline-block;
    }

    .act-text {
        display: inline-block;
        font-size: 1.4375rem;
        height: 50px;
        float: right;
        position: relative;
        right: 30px;
        top: 28px;
    }
}
</style>
